<template>
  <div class="card art-custom-card">
    <h3 class="box-title">用户概况</h3>
    <div class="chart" ref="chartRef"></div>
    <!-- <div class="text">
      <p class="subtitle">比上周 <span class="text-success">+23%</span></p>
      <p class="subtitle">我们为您创建了多个选项，可将它们组合在一起并定制为像素完美的页面</p>
    </div> -->
    <div class="list">
      <div v-for="(item, index) in list" :key="index">
        <p>{{ item.num ? item.num : 0 }}</p>
        <p class="subtitle">{{ item.name }}（人）</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { hexToRgba, getCssVar } from '@/utils/ui'
import { EChartsOption } from 'echarts'
import { useChart } from '@/composables/useChart'
const props = defineProps({
  memberData: {
    type: Object,
    default: () => ({})
  }
})


const {
  chartRef,
  isDark,
  initChart,
  updateChart,
  getAxisLabelStyle,
  getAxisLineStyle,
  getAxisTickStyle,
  getSplitLineStyle
} = useChart()

const list = [
  { name: '今日新增用户', num: Number(props.memberData.todayAddMember) },
  { name: '本月新增用户', num: Number(props.memberData.monthAddMember) },
  { name: '上月新增用户', num: Number(props.memberData.upMonthAddMember) },
  { name: '总用户数', num: Number(props.memberData.memberToday) }
]

const userData = ref(props.memberData.memberList)
// 定义真实数据
const months = ['january', 'february', 'march', 'april', 'may', 'june',
  'july', 'august', 'september', 'october', 'november', 'december'];
const realData = months.map(e => userData.value ? userData.value[e] : {})
// const realData = [50, 25, 40, 20, 70, 35, 65, 30, 35, 20, 40, 44]

// 初始化动画函数
const initChartWithAnimation = () => {
  // 首先初始化图表，数据为0
  initChart(options(true))
  updateChart(options(false))
}

watch(isDark, () => {
  initChart(options())
})

onMounted(() => {
  initChartWithAnimation()
})

const options: (isInitial?: boolean) => EChartsOption = (isInitial) => {
  const isInit = isInitial || false
  return {
    // 添加动画配置
    animation: true,
    animationDuration: 0,
    animationDurationUpdate: 0,
    grid: {
      left: '2.2%',
      right: '3%',
      bottom: '0%',
      top: '10px',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月'
      ],
      axisTick: getAxisTickStyle(),
      axisLabel: getAxisLabelStyle(true),
      axisLine: getAxisLineStyle(true)
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: realData.reduce((prev, curr) => Math.max(prev, curr), 0),
      axisLabel: getAxisLabelStyle(true),
      axisLine: getAxisLineStyle(!isDark.value),
      splitLine: getSplitLineStyle(true)
    },
    series: [
      {
        name: '新增用户',
        color: getCssVar('--main-color'),
        type: 'line',
        stack: '总量',
        data: isInit ? new Array(12).fill(0) : realData,
        smooth: true,
        symbol: 'none',
        lineStyle: {
          width: 2.2
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: hexToRgba(getCssVar('--el-color-primary'), 0.15).rgba
            },
            {
              offset: 1,
              color: hexToRgba(getCssVar('--el-color-primary'), 0.01).rgba
            }
          ])
        },
        animationDuration: 0,
        animationDurationUpdate: 1500
      }
    ]
  }
}
</script>

<style lang="scss" scoped>
.card {
  box-sizing: border-box;
  width: 100%;
  height: 420px;
  padding: 16px;

  .chart {
    box-sizing: border-box;
    width: 100%;
    // height: 220px;
    height: 280px;
    padding: 20px 0 20px 20px;
    border-radius: calc(var(--custom-radius) / 2 + 4px) !important;
  }

  .text {
    margin-left: 3px;

    h3 {
      margin-top: 20px;
      font-size: 18px;
      font-weight: 500;
    }

    p {
      margin-top: 5px;
      font-size: 14px;

      &:last-of-type {
        height: 42px;
        margin-top: 5px;
      }
    }
  }

  .list {
    display: flex;
    justify-content: space-between;
    margin-left: 3px;
    margin-top: 10px;

    >div {
      flex: 1;
      text-align: center;

      p {
        font-weight: 400;

        &:first-of-type {
          font-size: 24px;
          color: var(--art-gray-900);
        }

        &:last-of-type {
          font-size: 13px;
        }
      }
    }
  }
}

.dark {
  .card {
    .chart {
      background: none;
    }
  }
}

@media screen and (max-width: $device-phone) {
  .dark {
    .card {
      .chart {
        padding: 15px 0 0 !important;
      }
    }
  }
}
</style>
